<template>
  <div>
    <header-main :left-arrow="leftArrow" :fixed="fixed" :title="title" class="bg-nav"></header-main>
    <div class="padding-bottom-60 margin-top-46">
      <van-cell :border="border" :center="center"  :clickable="clickable" >
        <div class="vertical-center">
          <img src="./../../assets/img/dingyue.png"/>
          <div class="width-100">
            <div class="left-right">
              <span class="contact-name">订阅号消息</span>
              <span class="chat-gery-l contact-date">14:00</span>
            </div>
            <div class="left-right">
              <span class="chat-gery-l contact-message">[3条]你好呀！</span>
<!--              <span class="round-outside">-->
<!--                            <span class="round-inside">99+</span>-->
<!--               </span>-->
            </div>
          </div>
        </div>
      </van-cell>

<!--       v-for 中加入  :key="index" 可以防止空循环报错-->
      <van-cell :border="border"
                :center="center"
                :clickable="clickable"
                v-for="item in chatList"
                :key="index"
                @click="talk(item.id)">
        <div class="vertical-center">
          <img :src="item.img"/>
          <div class="width-100">
            <div class="left-right">
              <span class="contact-name">{{item.name}}</span>
              <span class="chat-gery-l contact-date">{{item.time|formatTime}}</span>
            </div>
            <div class="left-right">
              <span class="chat-gery-l contact-message">{{item.message}}</span>
                <span class="round-outside" v-if="item.noRead>0">
                  <span class="round-inside">{{item.noRead}}<span v-if="item.noRead>=99">+</span></span>
                </span>
            </div>
          </div>
        </div>
      </van-cell>



    </div>
  </div>
</template>

<script>

  import Utils  from '@/assets/js/util/util.js'
  import headerMain from '../common/header-main.vue'

  import Vue from 'vue';
  import { Cell, CellGroup ,NavBar } from 'vant';
  Vue.use(Cell).use(CellGroup).use(NavBar);
  // import HeaderMain from '@/pages/common/header-main.vue'
  export default {
    name:'Chat',
    components:{
      headerMain
    },
    data(){
      return{
        title:'微信',
        //是否显示边框
        border:true,
        center:true,
        //是否显示返回箭头
        leftArrow:false,
        // 是否固定顶部
        fixed:true,
        //开启点击反馈
        clickable:true,
        //定义最近聊天列表
        chatList:[

        ],
        //存储关系
        chatHistory:{
            sendUserId: '',
            acceptUserId: ''
        },
        // 绑定key 防止报错的，也没啥用
        index:'',
      }
    },
    methods:{
      talk:function(userId){
        // 使用  params 必须使用 路由 name 用 this.$route.params.userId 接收
        this.$router.push({
          name: 'talking',
          params: {
            userId: userId
          }
        })
      },
      getData() {

      },
    },
    mounted () {
      // this.addTestData();
      this.getData();

    },
    filters: {
      //格式化列表字段
      formatTime:function (time) {
        console.log(time);
        var result = '';
        try {
         return Utils.dateToFromNowDaily(time) ;
        }catch (err) {
          result=''
        }
      }
    }
  }
</script>

<style scoped>

  .vertical-center img{
    width: 46px;
    height: 46px;
    border-radius: 3px;
  }
  .contact-name{
    font-size: 18px;
    /* font-family: sans-serif; */
    font-weight: inherit;
    margin-left: 16px;
  }
  .contact-date{
    font-size: 12px;
  }
  .contact-message{
    font-size: 12px;
    margin-left: 16px;
  }


</style>
